<template>
	<view class="page content">
		<view class="headBox">
			<text class="wzText">重庆</text>
			<uni-icons type="down" size="20"></uni-icons>
			<view class="searchBox" @click="toSearch">
				<uni-icons type="search" class="searchIcon" size="26"></uni-icons>
				<text>搜索商品或者服务名称</text>
				<text class="btn">搜索</text>
			</view>
		</view>
		<view class="contbox">
			<swiper class="index-section-swiper" :indicator-dots="true" indicator-color="#BFCFFD"
				indicator-active-color="#CF712B" circular>
				<swiper-item class="swiper-item" v-for="(item,index) in indexInfo.bannerList" :key="index"
					@click="activity(item)">
					<image :src="path+item.filePath" mode="" class="cell-icon"></image>
				</swiper-item>

			</swiper>
			<!-- <view class="announcement">
				<uni-icons class="sound-filled-icon" type="sound-filled" size="20"></uni-icons>
				<view class="announcement-text">
					<swiper class="index-section-swiper-news" :indicator-dots="false" :autoplay="true" :vertical="true"
						indicator-color="#BFCFFD" indicator-active-color="#CF712B" circular>
						<swiper-item class="swiper-item" v-for="(item,index) in newsList" :key="index"
							@click="announcementDetails(item)">
							<text>{{item.title}}</text>
						</swiper-item>

					</swiper>
				</view>
				<text class="moreBtn" @click="announcementList">更多></text>
			</view> -->
			<view class="yingyBox advertising" v-if="indexInfo">
				<view @click="activity(indexInfo.navigationList[0])">
					<image :src="path+indexInfo.navigationList[0].filePath"></image>
					<view class="advertisingTitle" :style="{color:indexInfo.navigationList[0].colour}">
						{{indexInfo.navigationList[0].title}}
					</view>
				</view>
				<view>
					<view @click="activity(indexInfo.navigationList[1])">
						<image :src="path+indexInfo.navigationList[1].filePath"></image>
						<view class="advertisingTitle" v-bind:style="{color:indexInfo.navigationList[1].colour}">
							{{indexInfo.navigationList[1].title}}
						</view>
					</view>
					<view @click="activity(indexInfo.navigationList[2])">
						<image :src="path+indexInfo.navigationList[2].filePath"></image>
						<view class="advertisingTitle" :style="{color:indexInfo.navigationList[2].colour}">
							{{indexInfo.navigationList[2].title}}
						</view>
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="title">热销专区<text class="moreBtn" @click="storeMore('')">更多></text></view>
				<hotselling-list :list="indexInfo.hotProductEntity"></hotselling-list>
			</view>
			<!-- 广告3 -->
			<image class="gdImage" :src="path+indexInfo.advertising3.filePath"></image>
			<view class="box1">
				<view class="title">知了陪诊<text class="moreBtn" @click="storeMore(3)">更多></text></view>
				<knowing-food :list="indexInfo.accompanyProductEntity"></knowing-food>
			</view>
	


			<!-- 广告2 -->
			<image class="gdImage" :src="path+indexInfo.advertising2.filePath"></image>
			<view class="box1">
				<view class="title">知麻上门<text class="moreBtn" @click="storeMore(2)">更多></text></view>
				<knowing-food :list="indexInfo.attendProductEntity"></knowing-food>
			</view>

			<!-- 广告1 -->
			<image class="gdImage" :src="path+indexInfo.advertising1.filePath"></image>
			<view class="box1">
				<view class="title">知食饭团<text class="moreBtn" @click="storeMore(1)">更多></text></view>
				<knowing-food :list="indexInfo.eatProductEntity"></knowing-food>
			</view>
				</view>
	</view>
</template>

<script>
	import HotsellingList from '@/components/basics/hotSellingList.vue';
	import KnowingFood from '@/components/basics/KnowingFood.vue';

	export default {
		components: {
			HotsellingList,
			KnowingFood
		},
		data() {
			return {

				list: [], // 列表
				page: 1,
				pageSize: 50, // 
				total: 0, // 总数
				hotList: [], // 热销
				indexInfo: null, // 
				path: this.$http.tpUrl + '/', // 图片前缀
				newsList: [], // 新闻列表
				storeId: '',
				sellId: '', // 
			}
		},
		onLoad(options) {
			if (options.storeId && options.sellId) {
				this.sellId = options.sellId
				this.storeId = options.storeId
			}
			// this.init()
		},
		onShow() {
			this.page = 1
			this.total = 0
			this.list = []
			let openId = uni.getStorageSync('openId') || ''
			let id = uni.getStorageSync('id') || ''
			if (openId && id) {
				this.$nextTick(() => {
					this.initData()
					this.newsListData()
				})
			} else {
				this.$nextTick(() => {
					this.init()
				})
			}


		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			if (this.total > this.list.length) {
				this.page = parseInt(this.page) + 1
			}
		},
		methods: {
			// 登录获取个人信息  后续要改 
			init() {
				let _this = this;
				var sellerId=_this.sellId;
				console.log("sellerId:",sellerId);
				uni.setStorageSync('sellerId', sellerId)
				_this.$http.fetchData({
					url: '/common/token/' + 'WeChatApplateCustomer/123456',
					method: 'GET',
					data: {},
					success(tokenRes) {
						console.log(tokenRes)
						uni.setStorageSync('token', tokenRes.data)
						_this.$nextTick(() => {
							uni.login({
								provider: 'weixin', //使用微信登录
								success: function(loginRes) {
									console.log(loginRes.code)
									// return
									_this.$http.fetchData({
										url: '/wechatApplet/customer/user/login/' +
											loginRes.code + '?storeId=' + _this
											.storeId + '&sellId=' + _this.sellId,
										method: 'GET',
										data: {},
										success(res) {
											console.log(res)
											uni.setStorageSync('userInfo', JSON
												.stringify(res.data))
											uni.setStorageSync('openId', res.data
												.openId)
											uni.setStorageSync('id', res.data.id)

											_this.$nextTick(() => {
												_this.initData()
												_this.newsListData()
											})
										}
									})
								}
							})
						})

					}
				})
			},
			// 首页数据
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/index/',
					method: 'GET',
					data: {},
					success(res) {
						_this.indexInfo = res.data
					}
				})
			},
			// 搜索
			toSearch() {
				uni.navigateTo({
					url: `/pages/index/search`
				})
			},
			// 查看详情
			getItem(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${this.total}`
				uni.navigateTo({
					url: `/pages_category_page1/procedureList/procedureList${paramsStr}`
				})
			},
			// 公告
			announcementList() {
				uni.navigateTo({
					url: `/pages_category_page1/index/announcementList`
				})
			},
			// 新闻
			newsListData() {
				let _this = this;
				let data = {
					userId: uni.getStorageSync('id'),
					type: 2,
					page: this.page,
					pageSize: this.pageSize
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/notice/',
					method: 'GET',
					data: data,
					success(res) {

						_this.newsList = res.data.list


					}
				})
			},
			// 查看详情
			announcementDetails(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?id=${id}`
				uni.navigateTo({
					url: `/pages_category_page1/index/announcementDetails${paramsStr}`
				})
			},
			// 更多
			storeMore(e) {
				console.log(e)
				uni.setStorageSync('productType', e)
				uni.navigateTo({
					// url: `/pages/catering/cateringList`
					url: `/pages/index/search?productType=${e}`
				})
			},
			
			handleCommon(indexInfoNavigation){
				console.log("indexInfoNavigation",indexInfoNavigation)
				if(indexInfoNavigation.redirectType==1){
					uni.navigateTo({
						url: indexInfoNavigation.redirect
						// url:`/pages_category_page1/goods/eventRegistration?id=1`
					})
				}
				if (indexInfoNavigation.redirectType == 3) {
					let redirect = JSON.parse(indexInfoNavigation.redirect)
					console.log(redirect)
					uni.navigateToMiniProgram({
						appId: redirect.appId,
						path: redirect.path,
						envVersion: 'trial',
						extraData: {
				
						},
						success(res) {
							// 打开成功
							console.log('打开成功')
						}
					})
				}
			},
			// banner 活动
			activity(item) {
				console.log(item)
				// return
				if (item.redirectType == 1) {
					uni.navigateTo({
						url: item.redirect
						// url:`/pages_category_page1/goods/eventRegistration?id=1`
					})
				}
				if (item.redirectType == 3) {
					let redirect = JSON.parse(item.redirect)
					console.log(redirect)
					uni.navigateToMiniProgram({
						appId: redirect.appId,
						path: redirect.path,
						envVersion: 'trial',
						extraData: {

						},
						success(res) {
							// 打开成功
							console.log('打开成功')
						}
					})
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		background: rgba(62, 122, 233, 0.05);
		padding-bottom: 60rpx;
	}

	.headBox {
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.wzText {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #232323;
	}

	.searchBox {
		height: 80rpx;
		line-height: 80rpx;
		background: #ffe6be;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding-left: 24rpx;
		position: relative;
		overflow: hidden;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		margin-top: 30rpx;
	}

	.searchBox .searchIcon {
		vertical-align: middle;
	}

	.searchBox .btn {
		display: inline-block;
		width: 144rpx;
		height: 80rpx;
		background: #d97e35;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		border-top-left-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;

	}

	.contbox {
		padding: 0 30rpx;
		margin-top: -76rpx;
	}

	.index-section-swiper {
		width: 690rpx;
		height: 346rpx;
	}

	.swiper-item {
		width: 690rpx;
		height: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper-item image {
		width: 690rpx;
		height: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.announcement {
		position: relative;
		padding: 16rpx 25rpx;
		padding-left: 88rpx;
		padding-right: 102rpx;
		background: #fffbf3;
		border-radius: 40rpx;
		overflow: hidden;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 40rpx;
	}

	.announcement-text {
		width: 100%;
		height: 38rpx;
	}

	.announcement .sound-filled-icon {
		position: absolute;
		left: 25rpx;
		top: 50%;
		margin-top: -22rpx;
	}

	.index-section-swiper-news {
		width: 100%;
		height: 38rpx;
		overflow: hidden;
	}

	.announcement .moreBtn {
		position: absolute;
		right: 25rpx;
		top: 50%;
		margin-top: -19rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #fdab34;
		line-height: 38rpx;
	}

	.yingyBox {
		display: flex;
		margin-top: 40rpx;
	}

	.yingyBox>view {
		flex: 1;
	}

	.yingyBox>view:nth-child(1) {
		width: 330rpx;
		height: 372rpx;
		margin-right: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.yingyBox>view:nth-child(1) .advertisingTitle {
		position: absolute;
		top: 76rpx;
		left: 0;
		right: 0;
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #fdab34;
	}

	.yingyBox>view:nth-child(1) image {
		width: 330rpx;
		height: 372rpx;
	}

	.yingyBox>view:nth-child(2)>view {
		border-radius: 20rpx;
		overflow: hidden;
		width: 330rpx;
		height: 176rpx;
		position: relative;
	}

	.yingyBox>view:nth-child(2)>view .advertisingTitle {
		position: absolute;
		bottom: 28rpx;
		left: 0;
		right: 0;
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		padding-left: 18rpx;
		color: #fdab34;
		/* backdrop-filter: blur(60rpx); */
	}

	.yingyBox>view:nth-child(2)>view:nth-child(1) {
		margin-bottom: 20rpx;
	}

	.yingyBox>view:nth-child(2) image {
		width: 330rpx;
		height: 176rpx;
	}

	.box1 {
		margin-top: 35rpx;
	}

	.title {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #232323;
		position: relative;
	}

	.title .moreBtn {
		line-height: 38rpx;
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -19rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #fdab34;
	}

	.gdImage {
		width: 690rpx;
		height: 278rpx;
		background: rgba(0, 0, 0, 0.00);
		border-radius: 20rpx;
		margin-top: 68rpx;
	}
</style>